.. |Pal_ic| image:: Img/Pal_ic.png .. |Set_ic| image:: Img/Set_ic.png .. |Edit_ic2| image:: Img/Edit_ic2.png .. |tDobOp_ic| image:: Img/tDobOp.png .. |tUdal_ic| image:: Img/tUdal.png .. _Руководство по брендовым настройкам: ##################################### Руководство по брендовым настройкам ##################################### ================================================== Назначение и общий функционал брендовых настроек ================================================== Редактор брендовых настроек служит для того, чтобы настроить переменные цвета, используемые в проекте, например, такие переменные как secondary, primary, text-dark и т.д. Также они позволяют настроить основной шрифт: выбрать локальный или внешний файл шрифта, настроить цвет, размер и жирность. Страница Редактора брендовых настроек открывается по кнопке «Редактор брендов» пункта «Администрирование» в сайдбаре Системы (:numref:`21Pic1`). .. _21Pic1: .. figure:: Img/Brand_sidebar.png :scale: 80 % :align: center *Кнопка «Редактор брендов» в сайдбаре* .. note:: Название пунктов меню сайдбара и расположение этих пунктов требуется уточнить в документации на Систему, так как они могут отличаться в зависимости от настроек Системы. Страница Редактора брендовых настроек также открывается из интернет-браузера по адресу: /admin/brands. После нажатия на кнопку «Редактор брендов» либо после перехода по адресу, указанному выше, в рабочей области Системы отобразится Редактор брендовых настроек. Редактор брендовых настроек состоит из следующих блоков: * Цвета * Настройки брендовых цветов (:numref:`21Pic2`). Здесь хранятся переменные цвета светлой темы. * Настройки темных брендовых цветов (:numref:`21Pic3`). Здесь хранятся переменные цвета темной темы. * Шрифты * Настройки брендовых шрифтов (:numref:`21Pic4`); * Настройки брендинговой типографии (:numref:`21Pic5`); * **Стили** * **Логотип** * **Картинка заднего фона на странице логина** * **Иконка системы** =========================== Настройка брендовых цветов =========================== .. _21Pic2: .. figure:: Img/Brand.png :scale: 80 % :align: center *Блок "Настройки брендовых цветов"* .. _21Pic3: .. figure:: Img/Brand1.png :scale: 80 % :align: center *Блок "Настройки темных брендовых цветов"* .. _21Pic4: .. figure:: Img/Brand2.png :scale: 80 % :align: center *Блок "Настройки брендовых шрифтов"* .. _21Pic5: .. figure:: Img/Brand4.png :scale: 80 % :align: center *Блок "Настройки брендинговой типографии"* Каждой переменной цвета в блоке "Настройки брендовых цветов" соответствует карточка с указанием названия цвета, его кодировкой в HEX-формате, кратким описанием функциональности и кнопками для изменения и удаления данной переменной цвета (:numref:`21Pic6`). .. _21Pic6: .. figure:: Img/Brand3.png :scale: 80 % :align: center *Карточка переменной цвета* ---------------------------------- Добавление новой переменной цвета ---------------------------------- Для добавления новой переменной цвета необходимо нажать на кнопку "Добавить", расположенную справа под списком карточек переменных цвета, используемых в Системе (:numref:`21Pic2`). После нажатия на эту кнопку в списке карточек переменных цвета, используемых в Системе, появится карточка новой переменной с именем "new_value" (:numref:`21Pic7`). .. _21Pic7: .. figure:: Img/New_color1.png :scale: 80 % :align: center *Новая переменная цвета* По умолчанию этой переменной будет присвоен цвет, которому в HEX-формате соответствует значение "#f9f9f9". Изменить название этой переменной, указать новый цвет в HEX-формате или добавить описание можно, нажав на соответствующую кнопку |Edit_ic2| "Редактировать" на карточке переменной цвета. Добавление или изменение описания проводится после нажатия кнопки |tDobOp_ic|. Сохранение текста описания происходит при нажатии соответствующей кнопки |Edit_ic2|. Для сохранения новой переменной необходимо нажать кнопку "Сохранить", расположенную справа над списком карточек переменных цвета, используемых в Системе (:numref:`21Pic2`). ----------------------------- Изменение цвета у переменной ----------------------------- Новый цвет переменной можно указать вручную в HEX-формате в поле переменной, нажав на соответствующую кнопку |Edit_ic2| "Редактировать" на карточке переменной цвета (:numref:`21Pic7`). Также новый цвет можно выбрать из палитры цветов (:numref:`21Pic9`), которая откроется при клике на иконку цвета на карточке переменной цвета. .. _21Pic8: .. figure:: Img/Change_color.png :scale: 80 % :align: center *Выбор цвета из палитры* После того как цвет в палитре выбран, иконка цвета переменной изменится, также изменится значение цвета в HEX-формате в поле переменной (:numref:`21Pic9`). .. _21Pic9: .. figure:: Img/Change_color1.png :scale: 80 % :align: center *Новый цвет переменной* Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную справа над списком карточек переменных цвета, используемых в Системе (:numref:`21Pic2`). -------------------------- Удаление переменной цвета -------------------------- Удаление переменной цвета выполняется по кнопке "Удалить" |tUdal_ic| в правом нижнем углу карточки этой переменной (:numref:`21Pic9`). В открывшейся форме "Удаление записи" необходимо нажать кнопку "Продолжить" (:numref:`21Pic10`). .. _21Pic10: .. figure:: Img/Del_note3.png :scale: 80 % :align: center *Подтверждение удаления переменной цвета* После этого переменная цвета будет удалена из списка переменных цвета, используемых в Системе. Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную справа над списком карточек переменных цвета, используемых в Системе (:numref:`21Pic2`). ================================== Настройка темных брендовых цветов ================================== Функционал настройки темных брендовых цветов аналогичен функционалу настройки брендовых цветов (см. `Настройка брендовых цветов`_). ============================ Настройка брендовых шрифтов ============================ ------------------------------------- Добавление нового брендового шрифта ------------------------------------- Для добавления нового брендового шрифта необходимо нажать на кнопку "Добавить", расположенную справа под списком карточек брендовых шрифтов, используемых в Системе (:numref:`21Pic11`). После нажатия на эту кнопку в списке карточек брендовых шрифтов, используемых в Системе, появится карточка нового брендового шрифта (:numref:`21Pic11`). .. _21Pic11: .. figure:: Img/New_font.png :scale: 80 % :align: center *Кнопка "Добавить" и карточка нового брендового шрифта* Форма со свойствами брендового шрифта открывается после клика на карточку этого шрифта. .. note:: Пока значения полей в форме брендового шрифта не будут соответствовать условиям валидации, рамка карточки брендового шрифта будет красного цвета. На форме брендового шрифта расположены следующие поля (:numref:`21Pic12`): *Имя схемы* Указывается название шрифта. *Имя шрифта (Семейство)* Указывается название шрифта, которое будет использоваться при работе. *URL адрес* Указывается путь к локальному шрифту, который должен храниться в папке static/fonts, или URL-адрес внешнего шрифта. *Размер* Нужно выбрать один из трех вариантов: * Не задано - у шрифта будет размер по умолчанию (14px). * Пиксели (px)- указывается размер в пикселях. * Проценты (%) - указывается размер в процентах к видимой части родительского контейнера, в котором лежит редактируемый элемент, для которого устанавливается размер шрифта. * Rem (rem)- указывается размер от корневого размера, заданного в html-файле. * Em (em)- указывается размер от текущего шрифта. *Цвет текста* Цвет текста можно выбрать из выпадающего списка с переменными цвета, используемыми в Системе, или из палитры цветов. Палитра цветов открывается по соответствующей кнопке |Pal_ic|. *Жирность шрифта* Нужно выбрать один из трех вариантов: * Тонкий. * Нормальный. * Жирный. *Посмотреть* Поле для предпросмотра настроек шрифта. .. _21Pic12: .. figure:: Img/New_font1.png :scale: 80 % :align: center *Заполнение полей на форме брендового шрифта* После заполнения всех необходимых полей, нужно нажать на кнопку "Отправить". Если все значения в полях указаны корректно, то шрифт проходит валидацию и рамка карточки нового брендового шрифта становится серой (:numref:`21Pic13`). .. _21Pic13: .. figure:: Img/New_font2.png :scale: 80 % :align: center *Новый брендовый шрифт в списке брендовых шрифтов* Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную в правом нижнем углу Редактора брендовых настроек (:numref:`21Pic5`). -------------------------------------- Установка шрифта в качестве основного -------------------------------------- Основной шрифт применяется к странице Системы. Неосновной шрифт не применяется к странице Системы. Его можно использовать там, где стили компонентов задаются вручную (например, в Редакторе форм). Шрифт становится основным после выбора пункта "Использовать как основное" (:numref:`21Pic13`) в меню настроек шрифта, которое открывается по кнопке "Настройки шрифта" |Set_ic| на карточке шрифта (:numref:`21Pic14`). .. _21Pic14: .. figure:: Img/Set_font.png :scale: 80 % :align: center *Меню настроек шрифта* После выбора шрифта в качестве основного рамка карточки этого шрифта станет оранжевого цвета и на карточке появится надпись "Активен" (:numref:`21Pic13`). Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную в правом нижнем углу Редактора брендовых настроек (:numref:`21Pic5`). .. note:: Основным может быть выбран только один из брендовых шрифтов. Если ни один из шрифтов не выбран в качестве основного, то на странице будет использоваться шрифт, установленный в Системе по умолчанию. --------------------------------- Редактирование брендового шрифта --------------------------------- Функционал редактирования шрифта аналогичен функционалу добавления нового шрифта (см. `Добавление нового брендового шрифта`_). ---------------------------- Удаление брендового шрифта ---------------------------- Для удаления шрифта необходимо выбрать пункт "Удалить" в меню настроек шрифта (:numref:`21Pic14`). В открывшейся форме "Удаление записи" необходимо нажать кнопку "Продолжить" (:numref:`21Pic15`). .. _21Pic15: .. figure:: Img/Del_note3.png :scale: 80 % :align: center *Подтверждение удаления брендового шрифта* После этого брендовый шрифт будет удален из списка брендовых шрифтов, используемых в Системе. Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную в правом нижнем углу Редактора брендовых настроек (:numref:`21Pic5`). ================================== Настройка брендинговой типографии ================================== В блоке "Настройка брендинговой типографии" находятся отредактированные классы бренда quasar. Классы бренда отвечают за то, как отображается текст: шрифт, отступы, размер шрифта и т.п. Таким образом, в этом блоке можно установить дополнительные настройки для всех классов бренда quasar. Список всех классов по умолчанию можно посмотреть по ссылке: https://quasar.dev/style/typography. ------------------------------------------ Добавление новой брендинговой типографии ------------------------------------------ Для добавления новой брендинговой типографии необходимо нажать на кнопку "Добавить", расположенную справа под списком карточек брендинговых типографий, используемых в Системе (:numref:`21Pic16`). После нажатия на эту кнопку в списке карточек брендинговых типографий, используемых в Системе, появится карточка новой брендинговой типографии (:numref:`21Pic16`). .. _21Pic16: .. figure:: Img/New_tip.png :scale: 80 % :align: center *Кнопка "Добавить" и карточка нового брендового шрифта* Форма со свойствами брендинговой типографии открывается после клика на карточку этой брендинговой типографии. На форме брендинговой типографии расположены следующие поля (:numref:`21Pic17`): *Имя схемы* Указывается имя брендинговой типографии. *Имя шрифта (Семейство)* Указывается название брендинговой типографии, которое будет использоваться при работе. *Размер шрифта* Нужно выбрать один из трех вариантов: * Не задано - у шрифта будет размер по умолчанию (14px). * Пиксели (px)- указывается размер в пикселях. * Проценты (%) - указывается размер в процентах к видимой части родительского контейнера, в котором лежит редактируемый элемент, для которого устанавливается размер шрифта. * Rem (rem)- указывается размер от корневого размера, заданного в html-файле. * Em (em)- указывается размер от текущего шрифта. *Расстояние между строк* Из выпадающего списка необходимо выбрать расстояние между строк для данной брендинговой типографии. *Вел. расстояния между строк* Нужно выбрать один из трех вариантов: * Не задано - величина расстояния между строк будет по умолчанию (для каждого шрифта свое значение по умолчанию). * Пиксели (px)- указывается величина расстояния между строк в пикселях. * Проценты (%) - указывается величину расстояния между строк в процентах к видимой части родительского контейнера, в котором лежит редактируемый элемент, для которого устанавливается величина расстояния между строк. * Rem (rem)- указывается величина расстояния между строк от корневого размера, заданного в html-файле. * Em (em)- указывается величина расстояния между строк от текущего шрифта. *Цвет текста* Цвет текста можно выбрать из выпадающего списка с переменными цвета, используемыми в Системе, или из палитры цветов. Палитра цветов открывается по соответствующей кнопке |Pal_ic|. *Расстояние между символами* Из выпадающего списка необходимо выбрать расстояние между символами для данной брендинговой типографии. *Вел. расстояния между символами* Нужно выбрать один из трех вариантов: * Не задано - величина расстояния между символами будет по умолчанию (для каждого шрифта свое значение по умолчанию). * Пиксели (px)- указывается величина расстояния между символами в пикселях. * Проценты (%) - указывается величину расстояния между символами в процентах к видимой части родительского контейнера, в котором лежит редактируемый элемент, для которого устанавливается величина расстояния между символами. * Rem (rem)- указывается величина расстояния между символами от корневого размера, заданного в html-файле. * Em (em)- указывается величина расстояния между символами от текущего шрифта. *Жирность шрифта* Нужно выбрать один из трех вариантов: * Тонкий. * Нормальный. * Жирный. *Посмотреть* Поле для предпросмотра настроек шрифта. .. _21Pic17: .. figure:: Img/New_tip1.png :scale: 80 % :align: center *Заполнение полей на форме брендинговой типографии* После заполнения всех необходимых полей, нужно нажать на кнопку "Отправить". Для сохранения изменений необходимо нажать кнопку «Сохранить», расположенную в правом нижнем углу Редактора брендовых настроек (:numref:`21Pic16`). --------------------------------------- Редактирование брендинговой типографии --------------------------------------- Функционал редактирования брендинговой типографии аналогичен функционалу добавления новой брендинговой типографии (см. `Добавление новой брендинговой типографии`_). --------------------------------- Удаление брендинговой типографии --------------------------------- Для удаления шрифта необходимо нажать кнопку "Удалить" на карточке брендинговой типографии (:numref:`21Pic18`). .. _21Pic18: .. figure:: Img/Del_tip.png :scale: 80 % :align: center *Кнопка удаления брендинговой типографии* В открывшейся форме "Удаление записи" необходимо нажать кнопку "Продолжить" (:numref:`21Pic19`). .. _21Pic19: .. figure:: Img/Del_note3.png :scale: 80 % :align: center *Подтверждение удаления брендинговой типографии* После этого брендинговая типография будет удален из списка брендинговых типографий, используемых в Системе. Для сохранения изменений необходимо нажать кнопку "Сохранить", расположенную в правом нижнем углу Редактора брендовых настроек (:numref:`21Pic16`). ================================== Настройка стилей ================================== На вкладке можно настроить стили css? Которые могут использоваться в приложении. Поддерживаются следующие возможности: * Отредактировать - Использование описания стилей на вкладке * Внешняя ссылка - Подключение внешнего файла с описанием стилей ================================== Настройка логотипа ================================== На вкладке можно настроить логотип, отображаемый на станице логина и в "шапке" приложения . Для этого необходимо указать url картинки логотипа в поле на вкладке или выбрать иконку из иконок приложения. ==================================================================== Настройка картинки заднего фона на странице логина ==================================================================== На вкладке можно настроить картинку заднего фона на странице логина. Для этого необходимо указать url картинки. ================================== Настройка иконки системы ================================== На вкладке можно настроить иконку системы, отображаемую на вкладке браузера. Поддерживаются следующие варианты настроек: * Иконка системы - выбирается из иконок системы * Внешняя иконка - указывается url иконки на внешнем сервисе .. note:: Если указаны оба значения, то будет показываться внешняя иконка